import * as React from "react";
import { Tabs } from "antd";
import ReactEcharts from "echarts-for-react";
import moment from "moment";

const { TabPane } = Tabs;

export interface DtPowerData {
  voltage: any[]; //电压
  current: any[]; //电流
  powerFactory: any[]; //功率因数
  activePower: any[]; //有功功率
  reactivePower: any[]; //无功功率
}

export interface DtPowerChartsData {
  xData: any[];
  seriesData: any[];
}

export interface DtPowerChartsProps {
  data: DtPowerData;
}

export interface DtPowerChartsState {}

class DtPowerCharts extends React.Component<
  DtPowerChartsProps,
  DtPowerChartsState
> {
  private voltageData: DtPowerChartsData = {
    xData: [],
    seriesData: [],
  };
  private currentData: DtPowerChartsData = {
    xData: [],
    seriesData: [],
  };
  private powerFactoryData: DtPowerChartsData = {
    xData: [],
    seriesData: [],
  };
  private activePowerData: DtPowerChartsData = {
    xData: [],
    seriesData: [],
  };
  private reactivePowerData: DtPowerChartsData = {
    xData: [],
    seriesData: [],
  };

  render() {
    return (
      <div className="TabCharts">
        <Tabs type="card">
          <TabPane tab="电压" key="1">
            <div className="bare_body" style={{ marginBottom: 12 }}>
              <ReactEcharts
                option={this.getOption(this.voltageData)}
                notMerge={true}
                lazyUpdate={true}
                style={{ height: 327 }}
              />
            </div>
          </TabPane>
          <TabPane tab="电流" key="2">
            <div className="bare_body" style={{ marginBottom: 12 }}>
              <ReactEcharts
                option={this.getOption(this.currentData)}
                notMerge={true}
                lazyUpdate={true}
                style={{ height: 327 }}
              />
            </div>
          </TabPane>
          <TabPane tab="功率因素" key="3">
            <div className="bare_body" style={{ marginBottom: 12 }}>
              <ReactEcharts
                option={this.getOption(this.powerFactoryData)}
                notMerge={true}
                lazyUpdate={true}
                style={{ height: 327 }}
              />
            </div>
          </TabPane>
          <TabPane tab="有功功率" key="4">
            <div className="bare_body" style={{ marginBottom: 12 }}>
              <ReactEcharts
                option={this.getOption(this.activePowerData)}
                notMerge={true}
                lazyUpdate={true}
                style={{ height: 327 }}
              />
            </div>
          </TabPane>
          <TabPane tab="无功功率" key="5">
            <div className="bare_body" style={{ marginBottom: 12 }}>
              <ReactEcharts
                option={this.getOption(this.reactivePowerData)}
                notMerge={true}
                lazyUpdate={true}
                style={{ height: 327 }}
              />
            </div>
          </TabPane>
        </Tabs>
      </div>
    );
  }

  //钩子函数，props被改变时被触发
  componentWillReceiveProps(nextProps) {
    this.voltageData = this.getChartsData(nextProps.data.voltage, false);
    this.currentData = this.getChartsData(nextProps.data.current, false);
    this.powerFactoryData = this.getChartsData(
      nextProps.data.powerFactory,
      true
    );
    this.activePowerData = this.getChartsData(nextProps.data.activePower, true);
    this.reactivePowerData = this.getChartsData(
      nextProps.data.reactivePower,
      true
    );
    this.forceUpdate();
  }

  //图表X轴、Y轴数据
  getChartsData(list, tFlag: boolean) {
    let xData: any[] = [];
    let T: any[] = [];
    let A: any[] = [];
    let B: any[] = [];
    let C: any[] = [];
    list.map((item) => {
      xData.push(moment(item.dataTime).format("MM-DD HH:mm"));
      T.push(item.phaseT);
      A.push(item.phaseA);
      B.push(item.phaseB);
      C.push(item.phaseC);
      return item;
    });
    let seriesData: any[] = [];
    if (tFlag) {
      seriesData.push(this.getChartsSeries("总", T));
    }
    seriesData.push(this.getChartsSeries("A相", A));
    seriesData.push(this.getChartsSeries("B相", B));
    seriesData.push(this.getChartsSeries("C相", C));
    return {
      xData: xData,
      seriesData: seriesData,
    };
  }

  //图表
  getChartsSeries(name, data) {
    return {
      name: name,
      type: "line",
      smooth: true,
      data: data,
    };
  }

  //图表参数项
  getOption(chartsData: DtPowerChartsData) {
    return {
      tooltip: {
        trigger: "axis",
      },
      color: ["#F4990D", "#1890FF", "#57D9AB", "#FF6743"],
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: chartsData.xData,
      },
      yAxis: {
        type: "value",
      },
      series: chartsData.seriesData,
    };
  }
}

export default DtPowerCharts;
